<template>
  <!-- sku字段批量设置组件 -->
  <span v-if="field">
    <el-popover placement="top" width="160" v-model="visiblePopover">
      <div class="text-align-c pad-b-10">批量设置</div>

      <template v-if="inputType == 'number'">
        <el-input v-model="value" @keyup.native="value = checkInputNum(value)"/>
      </template>

      <template v-if="inputType == 'int'">
        <el-input v-model="value" @keyup.native="value = checkInputNumWithPoint(value, 0)"/>
      </template>

      <template v-if="inputType == 'string'">
        <el-input v-model="value"/>
      </template>

      <template v-if="inputType == 'select'">
        <el-select v-model="value" placeholder="请选择">
          <el-option v-for="(item, index) in templates" 
            :key="index" 
            :label="item.templateName" 
            :value="item.templateId">
          </el-option>
        </el-select>
      </template>
      
      <div class="mar-t-10" style="text-align: right">
        <el-button size="mini" type="text" @click="visiblePopover = false">取消</el-button>
        <el-button type="primary" size="mini" @click="doConfirm">确定</el-button>
      </div>
      <label slot="reference" @click="doEdit()">
        <i class="el-icon-circle-plus font-blue cursor-p"></i>
      </label>
    </el-popover>
  </span>
</template>

<script>
  export default {
    props: {
      // 字段名
      field: {
        type: String
      },
      // 输入类型
      // string：字符
      // number：数字
      // int: 整数
      // select：下拉
      inputType: {
        type: String,
        default: 'string'
      },
      // 运费模板
      templates: {
        type: Array
      }
    },
    data() {
      return {
        value: '',
        visiblePopover: false
      }
    },
    created() {
    },
    methods: {
      doEdit() {
        this.value = ''
        this.visiblePopover = true
      },
      // 批量更新sku价格，库存
      doConfirm() {
        let value = this.value
        if (value) {
          switch (this.inputType) {
            case 'number':
              value = parseFloat(value)
              if (value > 99999999) {
                this.$message({ type: 'error', message: '不能超过最大值99999999' })
                return
              }
              break
            case 'int':
              value = parseFloat(value)
              if (!this.validatePositiveNum(value)) {
                this.$message({ type: 'error', message: '请输入整数' })
                return
              }
              if (value > 99999999) {
                this.$message({ type: 'error', message: '不能超过最大值99999999' })
                return
              }
              break
            case 'string':
              if (value.length > 100) {
                this.$message({ type: 'error', message: '不能超过100个字符' })
                return
              }
              break
          }
        } else {
          value = this.inputType === 'int' ? 0 : ''
        }
        this.visiblePopover = false
        this.$emit('confirmed', this.field, value)
      }
    }
  }
</script>

<style lang="less" scoped>

</style>